import { FC, useState, useEffect, useRef } from 'react';
import { Divider, Space, Table, Button, message, Spin, Pagination } from 'antd';
import './smallPolicyDetail.less';
import { Modal } from 'antd';
import { useLocation } from 'react-router-dom';
import { getUrlParams } from '@src/utils';
import { getSmallPolicyByOrderNoApi } from '@src/apis/invoiceApis';
import { createKeyValuesDom } from '@src/components/createKeyValues';
export const SmallPolicyDetail: FC = () => {
  const location = useLocation();
  const searchObj: any = getUrlParams(location.search);
  useEffect(() => {
    getPageInfo();
    return () => {};
  }, [location]);
  const [biaoPop, setBiaoPop] = useState<any>([<div key={1}></div>]);

  const biaodemingxPop: any = useRef({});
  const [loading, setLoading] = useState<boolean>(false);
  const [modalShow, setModalShow] = useState<boolean>(false);
  const [pageData, setPageData] = useState<any>({
    subPolicyDetail: { riskInfoDTOList: [] },
    proposalDetail: {},
  });
  const [colums] = useState<any>([
    {
      title: '条款名称',
      dataIndex: 'clauseName',
      key: 'clauseName',
      width: 200,
    },
    {
      title: '备案号',
      dataIndex: 'clauseCode',
      key: 'clauseCode',
      width: 100,
    },
    {
      title: '主/附加险标志',
      dataIndex: 'clauseTypeFraDictName',
      key: 'clauseTypeFraDictName',
      width: 120,
    },
    {
      title: '责任名称',
      dataIndex: 'kindName',
      key: 'kindName',
      width: 100,
    },
    {
      title: '责任代码',
      dataIndex: 'kindCode',
      key: 'kindCode',
      width: 100,
    },
    {
      title: '责任起期',
      dataIndex: 'startDate',
      key: 'startDate',
      width: 100,
    },
    {
      title: '责任止期',
      dataIndex: 'endDate',
      key: 'endDate',
      width: 100,
    },
  ]);
  const [colums2] = useState<any>([
    {
      title: '标的编号',
      dataIndex: 'itemNo',
      key: 'itemNo',
      width: 150,
    },
    {
      title: '标的保费',
      dataIndex: 'itemPremium',
      key: 'itemPremium',
      width: 150,
    },
    {
      title: '标的保额',
      dataIndex: 'itemAmount',
      key: 'itemAmount',
      width: 150,
    },
    {
      title: '标的预计赔付金额',
      dataIndex: 'estimateIndemnityMoney',
      key: 'estimateIndemnityMoney',
      width: 150,
    },
    {
      title: '操作',
      key: 'Actions',
      width: 100,
      fixed: 'right',
      render: (text: any, record: any) => (
        <div>
          <Button
            type="link"
            onClick={() => {
              setModalShow(true);
              console.log(record);
              biaodemingxPop.current = {
                chinaName: [
                  { channelOrder: '订单号' },
                  { estimateIndemnityMoney: '标的预计赔付金额' },
                  { fromAddr: '商品出发地' },
                  { itemAmount: '标的保额' },
                  { itemNo: '标的编号' },
                  { itemPremium: '标的保费' },
                  { orderFinashDate: '订单完成时间' },
                  { orderNo: '保单号' },
                  { shopName: '商品名称' },
                  { toAddr: 'toAddr' },
                  { venderName: 'venderName' },
                  { xxxxx: '随便一些中文' },
                ],
                ...record,
              };
              let jsons: any = {
                chinaName: [
                  { channelOrder: '订单号' },
                  { estimateIndemnityMoney: '标的预计赔付金额' },
                  { fromAddr: '商品出发地' },
                  { itemAmount: '标的保额' },
                  { itemNo: '标的编号' },
                  { itemPremium: '标的保费' },
                  { orderFinashDate: '订单完成时间' },
                  { orderNo: '保单号' },
                  { shopName: '商品名称' },
                  { toAddr: 'toAddr' },
                  { venderName: 'venderName' },
                  { xxxxx: '随便一些中文' },
                ],
                appliName: 'asdf投保人名称',
                appliIdentifyType: '99投保人证件类型',
                testName: 'asdf测试姓名',
                appliIdentifyNumber: '10000009投保人证件号码',
              };
              let a = createKeyValuesDom(
                biaodemingxPop.current.chinaName,
                biaodemingxPop.current,
                3
              );
              setBiaoPop(a);
            }}
          >
            标的明细
          </Button>
        </div>
      ),
    },
  ]);
  const [colums3] = useState<any>([
    {
      title: '商品ID',
      dataIndex: 'proposalOrder',
      key: 'proposalOrder',
      width: 150,
    },
    {
      title: 'dkuUUID',
      dataIndex: 'productItemType',
      key: 'productItemType',
      width: 150,
    },
    {
      title: '商品名称',
      dataIndex: 'orderNo',
      key: 'orderNo',
      width: 150,
    },
    {
      title: '三级分类',
      dataIndex: 'planCode',
      key: 'planCode',
      width: 150,
    },
    {
      title: '商品数量',
      dataIndex: 'planCode',
      key: 'planCode',
      width: 150,
    },
    {
      title: '商品单格',
      dataIndex: 'planCode',
      key: 'planCode',
      width: 150,
    },
  ]);
  const getPageInfo = () => {
    setLoading(true);
    getSmallPolicyByOrderNoApi({
      orderNo: searchObj.orderNo,
    })
      .then((result: any) => {
        setLoading(false);
        result.data.subPolicyDetail.riskInfoDTOList?.forEach((item: any) => {
          item.chinaName = JSON.parse(item.chinaName || '[]');
        });
        setPageData(result.data);
      })
      .catch((err: any) => {
        console.log(err);
        setLoading(false);
      });
  };
  return (
    <Spin spinning={loading} delay={100}>
      <div className="pageBox pad20 fff policyDetail">
        <div className="publicH1Box">
          <h1>投保订单信息</h1>
          <div className="itemBox">
            <div className="item">
              <div>
                <div className="name">投保订单号:</div>
                <div className="value">{pageData.proposalDetail.proposalOrder}</div>
              </div>
              <div>
                <div className="name">业务类型:</div>
                <div className="value">{pageData.proposalDetail.productItemTypeFraDictName}</div>
              </div>
              <div>
                <div className="name">投保单创建时间:</div>
                <div className="value">{pageData.proposalDetail.proposalCreateTime}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="publicH1Box margT20">
          <h1>订单信息</h1>
          <div className="itemBox">
            <div className="item">
              <div>
                <div className="name">订单号:</div>
                <div className="value">{pageData.subPolicyDetail.orderNo}</div>
              </div>
              <div>
                <div className="name">订单创建时间:</div>
                <div className="value">{pageData.subPolicyDetail.businessDate}</div>
              </div>
              <div>
                <div className="name">出单状态:</div>
                <div className="value">{pageData.subPolicyDetail.policyStatusFraDictName}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">退保状态:</div>
                <div className="value">{pageData.subPolicyDetail.surrenderStatusFraDictName}</div>
              </div>
              <div>
                <div className="name">投保人类型:</div>
                <div className="value">{pageData.subPolicyDetail.appliTypeFraDictName}</div>
              </div>
              <div>
                <div className="name">投保人名称:</div>
                <div className="value">{pageData.subPolicyDetail.appliName}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">投保人证件类型:</div>
                <div className="value">{pageData.subPolicyDetail.appliIdentifyTypeFraDictName}</div>
              </div>
              <div>
                <div className="name">投保人证件号码:</div>
                <div className="value">{pageData.subPolicyDetail.appliIdentifyNumber}</div>
              </div>
              <div>
                <div className="name">被保人类型:</div>
                <div className="value">{pageData.subPolicyDetail.insuredTypeFraDictName}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">被保人名称:</div>
                <div className="value">{pageData.subPolicyDetail.insuredName}</div>
              </div>
              <div>
                <div className="name">被保人证件类型:</div>
                <div className="value">
                  {pageData.subPolicyDetail.insuredIdentifyTypeFraDictName}
                </div>
              </div>
              <div>
                <div className="name">被保人证件号码:</div>
                <div className="value">{pageData.subPolicyDetail.insuredIdentifyNumber}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">保险起期:</div>
                <div className="value">{pageData.subPolicyDetail.startDate}</div>
              </div>
              <div>
                <div className="name">保险止期:</div>
                <div className="value">{pageData.subPolicyDetail.endDate}</div>
              </div>
              <div>
                <div className="name">原始保费:</div>
                <div className="value">{pageData.subPolicyDetail.premium}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">当前保费:</div>
                <div className="value">{pageData.subPolicyDetail.curAmount}</div>
              </div>
              <div>
                <div className="name">保额:</div>
                <div className="value">{pageData.subPolicyDetail.amount}</div>
              </div>
              <div>
                <div className="name">是否期缴:</div>
                <div className="value">
                  {pageData.subPolicyDetail.payStatus === '1' ? '是' : '不是'}
                </div>
              </div>
            </div>
          </div>
          <div className="grayLine1"></div>
          <div className="itemBox">
            <div className="item">
              <div>
                <div className="name">产品线:</div>
                <div className="value">{pageData.subPolicyDetail.classCode}</div>
              </div>
              <div>
                <div className="name">产品名称:</div>
                <div className="value">{pageData.subPolicyDetail.productName}</div>
              </div>
              <div>
                <div className="name">产品代码:</div>
                <div className="value">{pageData.subPolicyDetail.productCode}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">保障方案名称:</div>
                <div className="value">{pageData.subPolicyDetail.relateRationCode}</div>
              </div>
              <div>
                <div className="name">保障方案代码:</div>
                <div className="value">{pageData.subPolicyDetail.relateRationName}</div>
              </div>
              <div>
                <div className="name">商品名称:</div>
                <div className="value">{pageData.subPolicyDetail.planName}</div>
              </div>
            </div>
            <div className="item">
              <div>
                <div className="name">商品代码:</div>
                <div className="value">{pageData.subPolicyDetail.planCode}</div>
              </div>
              <div>
                <div className="name">核心保单号:</div>
                <div className="value">{pageData.subPolicyDetail.policyNo}</div>
              </div>
              <div>
                <div className="name">出单时间:</div>
                <div className="value">{pageData.subPolicyDetail.inputDate}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="tableBox fff margT20 border">
          <Table
            size={'small'}
            scroll={{ x: '100%' }}
            dataSource={pageData.subPolicyDetail.clauseKindDTOList || []}
            columns={colums}
            rowKey={(record: any) => record.rowNum || Math.random()}
            pagination={false}
          />
        </div>
        <div className="tableBox fff margT20 border">
          <Table
            size={'small'}
            scroll={{ x: '100%' }}
            dataSource={pageData.subPolicyDetail.riskInfoDTOList || []}
            columns={colums2}
            rowKey={(record: any) => record.rowNum || Math.random()}
            pagination={false}
          />
        </div>
      </div>
      {modalShow ? (
        <Modal
          width={800}
          className="biaodemingxi"
          destroyOnClose={true}
          title={biaodemingxPop.current.shopName}
          visible={modalShow}
          footer={[
            <Button
              key="submit"
              type="primary"
              onClick={() => {
                setModalShow(false);
              }}
            >
              确定
            </Button>,
          ]}
          onCancel={() => {
            setModalShow(false);
          }}
        >
          <div>
            <div className="h1Box">
              <div className="itemBox">{biaoPop}</div>
            </div>
            <div className="hidden tableBox fff margT20 border">
              <Table
                size={'small'}
                scroll={{ x: '100%' }}
                dataSource={[{ proposalOrder: 'asdf' }, { proposalOrder: 'proposalOrder' }]}
                columns={colums3}
                rowKey={(record: any) => record.rowNum || Math.random()}
                pagination={false}
              />
            </div>
          </div>
        </Modal>
      ) : null}
    </Spin>
  );
};
